import {
  trigger,  // 动画封装触发，外部的触发器
  state, // 转场状态控制
  style, // 用来书写基本的样式
  transition, // 用来实现css3的 transition
  animate, // 用来实现css3的animations
  keyframes // 用来实现css3 keyframes的
} from "@angular/animations";
export const flyIn = trigger('flyIn', [
  state('in', style({
    height: "170px",
    opacity: 1
  })), // 默认平移0
  state('out', style({
    height: '0px',
    opacity: 0,
  })), // 默认平移0
  transition('in => out', [ // 离场动画
    animate(500, keyframes([
      style({
        opacity: 1,
        offset: 0,
        height:"170px"
      }),
      style({
        opacity: 0,
        transform: 'scale3d(.3, .3, .3)',
        offset: 0.5,
      }),
      style({
        opacity: 0,
        offset: 1,
        height:"0px"
      })
      ]))
  ]),
  transition('out => in', [ // 进场动画
    animate(400,keyframes([
      style({
        opacity: 0,
        transform: 'scale3d(.3, .3, .3)',
        offset: 0,
        height:"0px"
      }),
      style({
        opacity: 1,
        transform: 'scale3d(1, 1, 1)',
        offset: 0.5,
        height:"170px"
      }),
    ]))
  ])
]);